import { REMOVE_TODO, SET_DOING, SET_TODO_STATUS, SET_TODO, SET_TODO_LIST } from "@/store/actionTypes";
import { ITodo, TODO_STATUS } from "@/typings";
import { watch } from "vue";
import { Store, useStore } from "vuex";

export interface IUseTodo {
  setTodo: (value: string) => void;
  setTodoList: () => void;
  removeTodo: (id: Number) => void;
  setStatus: (id: Number) => void;
  setDoing: (id: Number) => void;
}

interface IUseLocalStorage {
  getLocalList: () => ITodo[];
  setLocalList: (todoList: ITodo[]) => void;
}

function useTodo() {
  const store: Store<any> = useStore();
  const {getLocalList, setLocalList} :IUseLocalStorage= useLocalStorage();
  const todoList: ITodo[]=getLocalList();

  watch(()=>{
    return store.state.list;
  }, (todoList)=>{
    setLocalList(todoList);
  });

  function setTodo(value: string): void {
    const todo: ITodo = {
      id: new Date().getTime(),
      content: value,
      status: TODO_STATUS.WILLDO,
    };
    store.dispatch(SET_TODO, todo);
    //setLocalList(store.state.list); //用watch处理
  }
  function setTodoList() {
    store.dispatch(SET_TODO_LIST, todoList);
  }

  function removeTodo(id: Number) {
    store.dispatch(REMOVE_TODO, id);
    //setLocalList(store.state.list); //用watch处理
  }

  function setStatus(id: Number) {
    store.dispatch(SET_TODO_STATUS, id);
    //setLocalList(store.state.list); //用watch处理
  }

  function setDoing(id: Number) {
    store.dispatch(SET_DOING, id);
    //setLocalList(store.state.list); //用watch处理
  }

  return {
    setTodo,
    setTodoList,
    removeTodo,
    setStatus,
    setDoing,
  };
}

function useLocalStorage(): IUseLocalStorage {
  function getLocalList(): ITodo[] {
    return JSON.parse(localStorage.getItem("todoList") || "[]");
  }

  function setLocalList(todoList: ITodo[]): void {
    localStorage.setItem("todoList", JSON.stringify(todoList));
  }

  return { getLocalList, setLocalList };
}

export { useTodo };
